<template>
  <div class="tabBar-warp">
    <router-link
      :to="{ path: val.to, query: { key: val.key } }"
      class="tabBar-item"
      v-for="(val, key) in tabList"
      :key="val.key"
      @click.native="tabActive(val, key)"
    >
      <img :src="active === val.key ? val.selectIcon : val.icon" alt="" />
      <span class="text-num" v-if="val.key === 3">{{ tabKey }}</span>
      <span :class="['text', active === val.key ? 'active' : '']">{{
        val.text
      }}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "TabBar",
  props: {
    tabKey: Number
  },
  data() {
    return {
      tabList: [
        {
          key: 0,
          to: "/home",
          icon: require("../../img/home0.png"),
          selectIcon: require("../../img/home1.png"),
          text: "首页"
        },
        {
          key: 1,
          to: "/Classify",
          icon: require("../../img/classify0.png"),
          selectIcon: require("../../img/classify1.png"),
          text: "分类"
        },
        {
          key: 2,
          to: "/Discover",
          icon: require("../../img/discover0.png"),
          selectIcon: require("../../img/discover1.png"),
          text: "发现"
        },
        {
          key: 3,
          to: "/ShoppingCart",
          icon: require("../../img/shopping0.png"),
          selectIcon: require("../../img/shopping1.png"),
          text: "购物车"
        },
        {
          key: 4,
          to: "/My",
          icon: require("../../img/my0.png"),
          selectIcon: require("../../img/my1.png"),
          text: "我的"
        }
      ],
      active: 0
    };
  },
  methods: {
    tabActive(val) {
      this.active = val.key;
    }
  },
  watch: {
    tabKey(val, oldval) {
      console.log(oldval);
      this.active = val;
    }
  },
  // 计算属性
  computed: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.tabBar-warp {
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #ffffff;
  .tabBar-item {
    width: 20%;
    height: 165px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    font-size: 34px;
    color: black;
    padding: 13.5px 0;
    position: relative;
    img {
      width: 88px;
      height: 88px;
    }
    .text {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .text-num {
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #ff0000;
      position: absolute;
      top: 5px;
      right: 45px;
      border: solid #ff0000 1px;
      border-radius: 50%;
    }
    .active {
      color: red;
    }
  }
}
</style>
